<template>
	<view class="test-box scl-box-comp">
		<view class="tb-list" v-for="(item,index) in dataList" :key="index" @click="()=>checkNotCompleteScl(item.id,()=>itemClick(item))">
			
      <view style="position: relative;">
        <image :src="item.coverImg" class="tbi-img" mode="aspectFill"></image>
        <view class="use-count-num-wrapper">
          <view class="tbiip-count" >
            <image class="tbii-ic-count" :src="teamIcon" mode="">
            </image>{{item.collectNums}}次
          </view>  
        </view>
      </view>
			<view class="tbi-info">
        <view class="scl-box-top">
          <view class="tbii-title limit-text-single-line">{{item.sclName||item.scl_name}}</view>
          <view class="tbii-content limit-text-two-line">
            {{(item.summary||item.nickName)?(item.summary||item.nickName):'暂无'}}
          </view>
        </view>
        <view class="scl-box-bot" >
          <view class="btn-box">
            去测试
          </view>
        </view>
				<view class="tbii-price flex-between" v-if="false">
					<view class="tbiip-text"
						:style="{visibility:item.newOriginalPrice || item.discount == 10?'visible':'hidden'}">
						
            <template v-if="item.discountType === 4 ">
              <view class="yiyuan-discount-wrapper">
                <view  class="yiyuan-discount">1元测</view>
                <view class="base-price-box">
                  <text class="text-dc">
                    原价
                  </text>
                  <text class="price-dc">
                    ¥{{item.newOriginalPrice}}
                  </text>
                </view>
              </view>
              
            </template>
            <template v-else>
              <view class="discount-wrapper" v-if="item.discount">
                <view  class="discount-text">
                  {{item.discount == 10 ? '0元' : `${item.discount}折`}}后
                  <view class="price-box"> 
                    <text class="unit">¥</text>
                    <text class="price">{{item.discountPrice}}</text>
                  </view>
                </view> 
                
                <view class="base-price-box">
                  <text class="text-dc">
                    原价
                  </text>
                  <text class="price-dc">
                    ¥{{item.newOriginalPrice}}
                  </text>
                </view>
              </view>
              
              <text v-else class="main-price"><text class="money-icon">¥</text> {{item.newOriginalPrice}}</text>
            </template>
          </view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import sclNotCompleteMixin from '@/mixins/sclNotCompleteMixin.js'
	export default {
    mixins: [sclNotCompleteMixin],
		name: "test-list",
		props: {
      dataList:{
        type:Array,
        default:()=>[]
      }
    },
    async mounted() {
      await this.getSclNotCompleteInfo()
    },
		data() {
			return {
				test_num: this.imgBaseURL + '/sclResult/test_num.png',
        teamIcon:this.imgBaseURL + '/team-icon.png',
			};
		},
		methods: {
			itemClick(item) {
        
				if (item.reportId) {
					uni.redirectTo({
						url: '/subcontractorB/pages/sclResult/sclResult?reportId=' + item.reportId + '&sclId=' +
							item.id
					})
				} else {
          this.$u.api.addLog({sclId:item.id,sourseType:8})
					uni.redirectTo({
						url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
							sclId: item.id
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tbiip-count {
		font-size: 20rpx;
		font-weight: 300;
		color: #888888;
	}

	.tbii-ic-count {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.tbiip-original {
		font-size: 24rpx;
		color: #CCCCCC;
		text-decoration: line-through;
		margin-left: 4rpx;
	}

	.tbii-price {
		position: absolute;
		left: 0rpx;
		right: 76rpx;
		bottom: 20rpx;
		width: 100%;
	}

	.tbiip-text {
		font-size: 32rpx;
		color: #F14C4C;
	}

	.tbii-content {
		font-size: 26rpx;
		font-weight: 300;
		color: #888888;
		// line-height: 42rpx;
    line-height: 34rpx;
		margin-top: 4rpx;
	}

	.tbii-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333435;
    
    
    height: 46rpx;
    line-height: 46rpx;
	}

	.tbi-img {
		width: 165rpx;
		height: 180rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.tbi-info {
		width: 455rpx;
		height: 205rpx;
		margin-left: 26rpx;
		position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .scl-box-bot{
      display: flex;
      align-items: flex-end;
      margin-bottom: 22rpx;
    
      
      .btn-box{
        // margin-top: 18rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;
        
        width: 130rpx;
        height: 50rpx;
        background: linear-gradient( 180deg, #A9EE87 0%, #70D669 100%);
        border-radius: 25rpx;
      }
    
    }
	}

	.tb-list {
		width: 100%;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		// padding: 40rpx 30rpx;
    padding: 28rpx 18rpx;
    box-sizing: border-box;
		display: flex;
		margin-bottom: 30rpx;
		box-shadow: 0px 2rpx 20rpx 0px #E7F5D9;
		position: relative;
	}

	.test-box {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 30rpx;
	}
  
  .scl-box-comp{
    .tbiip-text{
      display: flex;
      align-items: flex-end;
    }
    .sid-price-discount{
      width: 80rpx;
      height: 40rpx;
      background: linear-gradient(270deg, #FF2F00 0%, #FC9C94 100%);
      box-shadow: 0rpx 2rpx 20rpx 0rpx #D4F1C4;
      
      // border: 2rpx solid;
      border-image: linear-gradient(180deg, rgba(252, 244, 230, 1), rgba(255, 254, 235, 1)) 2 2;
      border-radius: 8rpx 0rpx 14rpx 0rpx;
      text-align: center;
      line-height: 40rpx;
      
      font-size: 28rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 40rpx;
      text-shadow: 0px 2px 20px #D4F1C4;
      
    }
    .yiyuan-discount{
      width: 90rpx;
      height: 42rpx;
      background: linear-gradient( 270deg, #FF4F21 0%, #F74D20 81%, #FF9B5A 100%);
      border-radius: 8rpx 0rpx 14rpx 0rpx;
      
      line-height: 42rpx;
      
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }
    .now-price{
      line-height: 40rpx;
    }
    .text{
      font-size: 20rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #F14C4C;
      line-height: 28rpx;
      margin-left: 10rpx;
      margin-right: 6rpx;
    }
    
    
    .yiyuan-discount-wrapper{
      position: relative;
      height: 48rpx;
      background-color: #D4F1C4;
      
      .yiyuan-discount{
        position: absolute;
        left: 0;
        top: 0;
        width: 130rpx;
        height: 48rpx;
        background: linear-gradient( 270deg, #FF2F00 0%, #FF8E84 100%);
        border-radius: 25rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
        z-index: 2;
      }
      
      
      .base-price-box{
        position: absolute;
        left: 100rpx;
        top: 8rpx;
        z-index: 1;
        // width: 223rpx;
        height: 40rpx;
        background: #EFECEC;
        border-radius: 25rpx;
        // line-height: 40rpx;
        box-sizing: border-box;
        padding-right: 14rpx;
        padding-left: 44rpx;
        
            display: flex;
            align-items: center;
            justify-content: flex-end;
        
        
        .text-dc{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
              word-break: keep-all;
    
        }
        .price-dc{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          line-height: 24rpx;
          text-align: left;
          font-style: normal;
        }
        
        text-align: right;
      }
      
    }
    
    
    .discount-wrapper{
      position: relative;
      height: 48rpx;
      
      .discount-text{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        
        display: flex;
        // align-items: center;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 8rpx;
        box-sizing: border-box;
        
        
        width: 180rpx;
        height: 48rpx;
        background: linear-gradient( 270deg, #FF2F00 0%, #FF8E84 100%);
        border-radius: 25rpx;
        
        .price-box{
          display: flex;
          align-items: flex-end;
          margin-left: 4rpx;
          padding-bottom: 4rpx;
          
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          
          .unit{
            font-size: 24rpx;
            line-height: 22rpx;
          }
          
          .price{
            
            font-size: 32rpx;
          }
        }
      }
      
      .base-price-box{
        position: absolute;
        left: 100rpx;
        top: 8rpx;
        z-index: 1;
        
        height: 40rpx;
        background: #EFECEC;
        border-radius: 25rpx;
        
        box-sizing: border-box;
        padding-right: 14rpx;
        padding-left: 90rpx;
        
        display: flex;
        // align-items: center;
            align-items: flex-end;
    
        justify-content: flex-end;
        
        
        .text-dc{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
          word-break: keep-all;
          
          padding-bottom: 4rpx;
        }
        .price-dc{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          line-height: 24rpx;
          text-align: left;
          font-style: normal;
          padding-bottom: 10rpx;
          margin-left: 4rpx;
        }
        
        text-align: right;
      }
        
      
    }
    
    
    
    
    .use-count-num-wrapper{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #FFFFFF;
      line-height: 45rpx;
      text-align: left;
      font-style: normal;
      
      position: absolute;
      left: 0;
      top: 0;
      
      
      width: 110rpx;
      height: 44rpx;
      // background: #474747;
      background: rgba(71,71,71,0.71);
      border-radius: 12rpx 0rpx 12rpx 0rpx;
      // opacity: 0.71;
          padding: 0 8rpx;
    
    }
    
    .tbiip-count {
    	// font-size: 20rpx;
    	// font-weight: 300;
    	// color: #888888;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #FFFFFF;
      line-height: 45rpx;
      text-align: left;
      font-style: normal;
      
      display: flex;
      justify-content: center;
      align-items: center;
      
      
      .tbii-ic-count {
        width: 22rpx;
        height: 22rpx;
        // margin-right: 10rpx;
      }
      
    }
    
    .tbii-ic-count {
    	width: 30rpx;
    	height: 30rpx;
    	margin-right: 10rpx;
    }
    
  }
</style>